<template>
  <div>
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="8" :xl="5" :xxl="4">
          <a-form-item label="审核状态">
            <a-select style="width: 100%" v-model="searchParams.verify_type">
              <a-select-option
                v-for="item in examineData"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="16" :xl="8" :xxl="7">
          <a-form-item label="发起时间">
            <a-range-picker :value="time" @change="dateChange" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :lg="14" :xl="11" :xxl="8">
          <a-form-item label>
            <a-select style="width: 40%" v-model="searchParams.search_type">
              <a-select-option
                v-for="item in searchmode"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
            <a-input style="width: 60%" v-model.trim="searchParams.name" placeholder="请输入查询条件"/>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="8" :xxl="5">
          <div class="top-btns">
            <a-button @click="searrchList" type="primary" html-type="submit">查询</a-button>
            <a-button @click="resetcondition">重置</a-button>
            <a-button @click="exportPop" type="primary"><a-icon type="download" />导出</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :rowSelection="rowSelection"
        :columns="columns"
        :rowKey="({uuid}) => uuid"
        :dataSource="columnsData"
        :pagination="pagination"
        :scroll="scrollX"
        :loading="loading"
      >
        <template slot="operation" slot-scope="text,record">
          <a @click="() => goDetail(record.uuid)">详情</a>
          <a class="interval" @click="() => hander(1,record)">审核</a>
          <a @click="() => hander(2,record)">拒绝</a>
        </template>
        <template slot="status" slot-scope="text">
          <p v-if="text ==0">未审核</p>
          <p v-if="text ==1">已审核</p>
          <p v-if="text ==2">已拒绝</p>
        </template>
      </a-table>
      <pagination
        :total="total"
        @loadDataList="getDefaultList"
        ref="pageBand"
      />
    </div>
    <div class="modal-wrap">
      <remarks
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        :hint="`请确认是否${auditTitle==1?'通过审核':'拒绝审核'}?`"
        ref="remarks"
        :isRefuse="auditTitle"
        @remarksConfirm="handleAuditOk"
      />
      <export-list ref="exportBand" exportApi="regionWithdraw"/>
    </div>
  </div>
</template>
<script>
import { BalanceWithdrawalList, examineOrrefuse } from '../../store/regionApi'
import { isPhone, isNum } from '../../utils/check'
import { mixin } from '../../utils/remaksMixin'

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default {
  mixins: [mixin],
  data() {
    return {
      detailData: {},
      auditTitle: '',
      rowSelection,
      time: [],
      examineData: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '未审核'
        },
        {
          value: 2,
          label: '已审核'
        },
        {
          value: 3,
          label: '已拒绝'
        }
      ],
      searchmode: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '大区分公司编号'
        },
        {
          value: 2,
          label: '大区分公司名称'
        },
        {
          value: 3,
          label: '大区分公司手机号'
        },
        {
          value: 4,
          label: '流水号'
        }
      ],
      searchParams: {
        start_time: 0,
        end_time: 0,
        verify_type: 0,
        search_type: 0,
        name: ''
      },
      form: this.$form.createForm(this),
      pagination: false,
      total: 0,
      loading: false,
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      scrollX: {},
      current: 1,
      columnsData: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'listId',
          width: 60,
          fixed: 'left'
        },
        {
          title: '大区分公司编号',
          dataIndex: 'region_no'
        },
        {
          title: '大区分公司名称',
          dataIndex: 'region_name'
        },
        {
          title: '大区分公司手机号',
          dataIndex: 'phone'
        },
        {
          title: '流水号',
          dataIndex: 'order_no'
        },
        {
          title: '提现金额（元）',
          dataIndex: 'amount'
        },
        {
          title: '手续费（元）',
          dataIndex: 'fee'
        },
        {
          title: '到账金额（元）',
          dataIndex: 'actual_amount'
        },
        {
          title: '持卡人姓名',
          dataIndex: 'card_user'
        },
        {
          title: '银行名称',
          dataIndex: 'bankname'
        },
        {
          title: '银行卡号',
          dataIndex: 'bankcard'
        },
        {
          title: '审核状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '发起时间',
          dataIndex: 'created_at'
        },
        {
          title: '处理时间',
          dataIndex: 'processed_at'
        },
        {
          title: '操作人',
          dataIndex: 'admin'
        },
        {
          title: '备注',
          width: 100,
          dataIndex: 'remark',
          customRender: (text, row, index) => {
            return {
              children: (
                <div class="col-sql" title={text}>
                  {text}
                </div>
              ),
              attrs: {}
            }
          }
        },
        {
          title: '操作',
          width: 200,
          fixed: 'right',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  methods: {
    // 详情
    goDetail(id) {
      this.$router.push({
        path: '/menu/region/CashDetail',
        query: {
          id
        }
      })
    },
    // 重置查询条件
    resetcondition() {
      this.time = []
      this.searchParams = {
        start_time: 0,
        end_time: 0,
        verify_type: 0,
        search_type: 0,
        name: ''
      }
      this.$refs.pageBand.getData()
    },
    // 审核或者拒绝
    hander(status, item) {
      this.detailData = item
      if (Number(this.detailData.status) === 0) {
        this.auditTitle = status
        this.openRemaks()
      } else {
        this.$message.warning('该记录已审核，无法重复操作！')
      }
    },
    // 查询
    searrchList() {
      let { search_type, name } = this.searchParams
      if (name && search_type !== 2) {
        let message = ''
        if (search_type === 1 || search_type === 4 || search_type === 3) {
          if (!isNum(name)) {
            if (search_type === 1) message = '省级分公司编号只能是数字'
            if (search_type === 4) message = '流水号只能是4只能是数字'
            if (search_type === 3) message = '手机号只能是4只能是数字'
            this.$message.warning(message)
            return false
          }
        }
      }
      this.$refs.pageBand.getData()
    },
    // 组件回调
    handleAuditOk({ remarks }) {
      const data = {
        status: this.auditTitle,
        id: this.detailData.uuid
      }
      if (remarks) {
        data.memo = remarks
      }
      examineOrrefuse(data).then(e => {
        this.$message.success(e.data.message)
        // this.getDefaultList()
        this.$refs.pageBand.getEvent()
      })
    },
    dateChange(date, [start_time, end_time]) {
      this.time = date
      this.searchParams.start_time =
        new Date(start_time + ' 00:00:00').getTime() / 1000
      this.searchParams.end_time =
        new Date(end_time + ' 23:59:59').getTime() / 1000
    },
    getDefaultList(info) {
      this.loading = true
      BalanceWithdrawalList({
        ...this.searchParams,
        num: info.pageSize,
        page: info.page
        })
        .then(res => {
          this.loading = false
          if (res.data.list.length) {
            this.scrollX = { x: 2500 }
          } else {
            this.scrollX = {}
          }
          this.columnsData = res.data.list.map((item, index) => {
            item.listId = (info.page - 1) * info.pageSize + (index + 1)
            return item
          })
          this.total = res.data.total_num
        })
        .catch(() => {
          this.loading = false
        })
    },
    exportPop () {
      this.$refs.exportBand.openPop()
    }
  }
}
</script>

<style>
.interval {
  padding: 0 5px;
}
.col-sql {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 130px;
}
</style>
